<template>
	<div>
		<el-card class="layout-search-card mb-4" shadow="never" :body-style="{ paddingBottom: '0' }">
			<el-form :model="state.queryParams" ref="queryForm" :inline="true">
				<el-form-item label="队列名称：">
					<el-input v-model="state.queryParams.queue" placeholder="请输入队列名称" class="w-[180px]" />
				</el-form-item>
				<el-form-item label="任务名称：">
					<el-input v-model="state.queryParams.job_name" placeholder="请输入任务名称" class="w-[180px]" />
				</el-form-item>
				<el-form-item label="任务id：">
					<el-input v-model="state.queryParams.job_id" placeholder="请输入任务id" class="w-[180px]" />
				</el-form-item>
				<el-form-item label="运行结果">
					<el-select class="w-[150px]" v-model="state.queryParams.result">
						<el-option label="全部" value="" />
						<el-option label="成功" value="1" />
						<el-option label="失败" value="0" />
					</el-select>
				</el-form-item>
				<el-form-item label="时间范围：">
					<datePicker v-model:dateTime="state.queryParams.create_time" :isPickerOptions="true" />
				</el-form-item>
				<el-form-item>
					<el-button-group>
						<el-button type="primary" icon="ele-Search" @click="searchTable"> 查询 </el-button>
						<el-button icon="ele-Refresh" @click="resetQuery" class="ml15"> 重置 </el-button>
					</el-button-group>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="layout-table-card" shadow="never">
			<el-table :data="state.tableList" v-loading="state.loading" style="width: 100%">
				<el-table-column prop="id" label="ID" width="120" />
				<el-table-column prop="queue" label="队列名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="job_name" label="任务名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="job_id" label="任务id" show-overflow-tooltip></el-table-column>
				<el-table-column prop="execute_time" label="执行耗时/s" show-overflow-tooltip></el-table-column>
				<el-table-column prop="result" label="运行结果" show-overflow-tooltip>
					<template #default="{ row }">
						<el-tag type="success" v-if="row.result">{{ row.result_desc }}</el-tag>
						<el-tag type="danger" v-else>{{ row.result_desc }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="create_time" label="创建时间" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="100" fixed="right">
					<template #default="{ row }">
						<div class="flex">
							<el-button type="primary" v-auth="'setting/queue/detail'" link @click="handleDetail(row)"> 详情 </el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-model="state" @tableChange="getTableList" />
		</el-card>
		<DetailDialog v-if="showDialog" ref="detailRef" @submit="getTableList" @close="showDialog = false" />
	</div>
</template>

<script setup lang="ts" name="queueLog">
import { reactive, onMounted, ref, nextTick } from 'vue';
import { queueLogLists } from '/@/api/setting/system';
import { usePage } from '/@/hooks/usePage';
import DetailDialog from '/@/views/sys/queue/component/detail.vue';

const detailRef = ref();

const showDialog = ref(false);

// 定义列表
const state = reactive<TableDataState>({
	loading: false,
	tableList: [],
	queryParams: {
		queue: '',
		job_name: '',
		job_id: '',
		result: '',
		create_time: '',
	},
	tableParams: {
		page_num: 1,
		page_limit: 15,
		page_total: 0 as any,
	},
});

const { getTableList, searchTable, resetQuery } = usePage({ tableData: state, apiData: queueLogLists });

const handleDetail = async (row: any) => {
	showDialog.value = true;
	nextTick(() => {
		detailRef.value?.setFormData(row,function(){
			detailRef.value?.open();
		});
	});
};

// 页面加载时
onMounted(() => {
	getTableList();
});
</script>

<style scoped lang="scss"></style>
